<template>
  <n-modal v-model:show="showModal" preset="dialog" :show-icon="false">
    <div class="text-center modelTile my-3 ">{{ title }}</div>
   <n-card class="w-800px">

     <n-form :model="formValue" :rules="rules" label-placement="left" :label-width="100">
       <n-grid x-gap="12">
         <n-gi :span="24">
           <n-form-item label="邮件标题：">
             <n-input></n-input>
           </n-form-item>
         </n-gi>
         <n-gi :span="24">
           <n-form-item label="发送：">
             <n-input></n-input>
           </n-form-item>
         </n-gi>
         <n-gi :span="24">
           <n-form-item label="抄送：">
             <n-input></n-input>
           </n-form-item>
         </n-gi>
         <n-gi :span="24">
           <n-form-item label="附件：">
             <div class="w-full  flex items-center flex-wrap">
               <n-upload
                   action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                   :custom-request="customRequest"
               >
                 <n-button>上传文件</n-button>
               </n-upload>
               <n-tag v-for="(item,index) in filenamelist" closable @close="delfile(index)">{{item}}</n-tag>
             </div>
           </n-form-item>
         </n-gi>
         <n-gi :span="24">
           <n-form-item label="正文：">
             <raichTextEdit ref="wangref"></raichTextEdit>
           </n-form-item>
         </n-gi>
         <n-gi :span="24">
           <n-form-item>
             <div class="w-full flex justify-center items-center">
               <n-button class="mx-1" @click="doClose">取 消</n-button>
               <n-button class="mx-1" type="primary" @click="savecaogao">保存草稿</n-button>
               <n-button class="mx-1" type="info" @click="handleOK">发 送</n-button>
             </div>
           </n-form-item>
         </n-gi>
       </n-grid>
     </n-form>
   </n-card>
  </n-modal>
</template>

<script setup name="Edit">
import {useRoute, useRouter} from "vue-router";
import http from "@/request/request"
const router = useRouter()
const route = useRoute()
const wangref = ref(null)     // 富文本编辑器的ref
const showModal = ref(false)    // 模态框的显示
const editType = ref("add")   // 类型，编辑。新建、查看
const title = ref("")         // 标题
const loading = ref(false)    // 加载状态
const emit = defineEmits(["shuaxin"])
const formValue = ref({})
const rules = ref({})
// 弹窗初始化
const init = (type, item = null) => {
  editType.value = type
  switch (type) {
    case "add":
      title.value = "新建"
      break;
    case "edit":
      title.value = "编辑"
      break;
    case "view":
      title.value = "详情"
      break;
  }
  if (item) {
    formValue.value = item
  }
  showModal.value = true
}
// 关闭模态框
const doClose = () => {
  showModal.value = false
  emit("shauxin")
  reset()
}
// 重置模态框
const reset = () => {
  formValue.value = {}
  editType.value = ""
  title.value = ""
}
const fileList=ref([])    // 附件文件名列表
const filenamelist = computed(()=>{
  return fileList.value.map(item=>{
    const urllist= item.split("/")
    return urllist[urllist.length-1]
  })
})
// 点击添加附件
const customRequest = (file, data, headers, withCredentials, action, onFinish, onError, onProgress) => {
  const formdata = new FormData()
  formdata.append("file", file.file)
  http.upload(formdata).then(res => {
    if (res.data.code === 0) {
      onFinish()
    }else{
      onError()
    }
  }).catch(()=>{
    onError()
  })
}
// 删除附件
const delfile=(xuhao)=>{
  fileList.value.splice(xuhao,1)
}



// 点击发送按钮
const handleOK = () => {
  console.log(wangref.value.getHtml(), "富文本内容")
}
// 点击保存到草稿
const savecaogao = () => {
  wangref.value.changeHtml("<p>富文本编辑器</p>")
}
// 抛出属性
defineExpose({init, doClose, reset})
</script>

<style scoped>

</style>
